import { ArrowDownOutlined, ArrowUpOutlined, KeyOutlined, UserOutlined } from '@ant-design/icons'
import { Button, Checkbox, Form, Input, Statistic, message } from 'antd'
import { useNavigate } from 'react-router-dom'
import './index.css'
import { FormData } from './interface'
import { login } from './service'
import { useDispatch, useSelector } from 'react-redux'
import { setToken } from '../../stores/home'
import CountUp from 'react-countup'
export default function Login() {
  const { token } = useSelector((state: any) => state.home)
  const formatter = (value: number) => <CountUp end={value} separator="," />
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const [form] = Form.useForm()

  const onFinish = async (values: FormData) => {
    // 验证登录
    console.log('Received values of form: ', values)
    await login({
      user_id: parseInt(values.user_id),
      password: values.password
    })
      .then(res => {
        console.log(res)
        return res?.data;
      })
      .then(data => {
        if (data.result === 'SUCCESS') {
          console.log(data.data)
          const { token, user_id, user_name, avatar,type } = data.data
          sessionStorage.setItem('token', token)
          sessionStorage.setItem('user_id', user_id)
          sessionStorage.setItem('user_name', user_name)
          sessionStorage.setItem('avatar', avatar)
          sessionStorage.setItem('type', type)
          dispatch(setToken(token))
          navigate('/home')
          message.success('登录成功')
        } else {
          message.error(data.message)
        }
      })
  }

  return (
    <>
      <div id="main">
        <div className="fx-equipment-manage">
          <div className="section-top">
            <div className="bricks bricks-banner-wrapper">
              <div className="banner-content">
                <div className="content-left">
                  <div className="bricks-main-title">解决企业级车辆管理难题</div>
                  <div className="bricks-description">基于React的车辆管理系统， 可解决设车辆，驾驶员，油费管理等问题</div>
                  <div className="btn-container">
                    <div className="bricks-btn background-green preview-plan">点击预览方案</div>
                    {/* @ts-ignore */}
                    <svg style={{ opacity: '0.6' }} t="1705310276492" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8718" width="200" height="200">
                      <path
                        d="M966.749091 602.763636H125.207273v-27.927272c0-60.043636 48.872727-108.916364 108.916363-108.916364H875.054545l74.007273 26.996364c9.774545 0 17.687273 7.912727 17.687273 17.687272v92.16z"
                        fill="#1b5cd7"
                        p-id="8719"
                        data-spm-anchor-id="a313x.search_index.0.i77.22fc3a81bpf6T9"
                        className="selected"></path>
                      <path
                        d="M972.8 686.545455H121.018182c-7.912727 0-13.963636-6.516364-13.963637-13.963637v-68.887273c0-6.516364 5.12-11.636364 11.636364-11.636363h841.541818c14.894545 0 27.461818 12.101818 27.461818 27.461818v53.061818c-0.465455 7.447273-6.981818 13.963636-14.894545 13.963637zM313.250909 485.469091S370.501818 365.381818 562.734545 339.781818 842.472727 397.032727 889.018182 506.414545c-75.403636 9.309091-575.767273-20.945455-575.767273-20.945454z"
                        fill="#1b5cd7"
                        p-id="8720"
                        data-spm-anchor-id="a313x.search_index.0.i76.22fc3a81bpf6T9"
                        className="selected"></path>
                      <path d="M294.632727 687.476364m-83.781818 0a83.781818 83.781818 0 1 0 167.563636 0 83.781818 83.781818 0 1 0-167.563636 0Z" fill="#1b5cd7" p-id="8721" data-spm-anchor-id="a313x.search_index.0.i74.22fc3a81bpf6T9" className="selected"></path>
                      <path d="M800.581818 682.821818m-83.781818 0a83.781818 83.781818 0 1 0 167.563636 0 83.781818 83.781818 0 1 0-167.563636 0Z" fill="#1b5cd7" p-id="8722" data-spm-anchor-id="a313x.search_index.0.i75.22fc3a81bpf6T9" className="selected"></path>
                      <path
                        d="M912.756364 562.734545c-13.032727 0-23.272727-10.24-23.272728-23.272727v-67.490909c-0.930909-0.465455-1.396364-0.930909-2.327272-1.396364-1.396364-0.930909-2.327273-1.396364-3.723637-2.327272L820.596364 437.527273l-10.24-4.654546c-11.636364-5.12-17.221818-18.618182-12.101819-30.72 5.12-11.636364 18.618182-17.221818 30.72-12.101818l12.101819 5.12 67.490909 33.047273 4.189091 2.792727c9.309091 6.050909 25.134545 15.825455 23.738181 35.374546v73.076363c-0.465455 13.032727-10.705455 23.272727-23.738181 23.272727zM80.058182 571.578182c-13.032727 0-23.272727-10.24-23.272727-23.272727v-27.927273c0-71.68 58.181818-127.534545 132.18909-127.534546h92.16c13.032727 0 23.272727 10.24 23.272728 23.272728s-10.24 23.272727-23.272728 23.272727H188.974545c-47.941818 0-85.643636 35.374545-85.643636 80.989091v27.927273c0 13.032727-10.24 23.272727-23.272727 23.272727z"
                        fill="#353E43"
                        p-id="8723"></path>
                      <path
                        d="M141.498182 660.014545H75.869091c-20.48 0-37.236364-16.756364-37.236364-37.236363V563.2c0-19.083636 15.825455-34.909091 34.909091-34.909091 13.032727 0 23.272727 10.24 23.272727 23.272727 0 8.843636-4.654545 16.290909-11.636363 20.014546v42.356363h56.785454c13.032727 0 23.272727 10.24 23.272728 23.272728s-10.705455 22.807273-23.738182 22.807272zM643.723636 660.014545H357.934545c-13.032727 0-23.272727-10.24-23.272727-23.272727s10.24-23.272727 23.272727-23.272727h285.789091c13.032727 0 23.272727 10.24 23.272728 23.272727s-10.24 23.272727-23.272728 23.272727zM928.116364 660.014545h-66.094546c-13.032727 0-23.272727-10.24-23.272727-23.272727s10.24-23.272727 23.272727-23.272727h57.250909v-44.218182c0-2.327273-1.861818-4.189091-4.189091-4.189091-13.032727 0-23.272727-10.24-23.272727-23.272727s10.24-23.272727 23.272727-23.272727c27.927273 0 50.734545 22.807273 50.734546 50.734545v53.061818c-0.465455 20.945455-17.221818 37.701818-37.701818 37.701818zM294.632727 433.338182l-32.116363-33.978182 4.189091-4.189091c31.650909-40.494545 104.727273-109.381818 247.621818-128.465454 154.530909-20.48 261.585455 22.807273 326.749091 133.12l-40.029091 23.738181c-55.389091-93.556364-144.290909-128.465455-280.669091-110.778181C392.378182 330.007273 329.076364 390.516364 302.545455 424.96l-0.93091 1.396364-6.981818 6.981818z"
                        fill="#353E43"
                        p-id="8724"></path>
                      <path
                        d="M355.607273 659.083636c-13.032727 0-23.272727-10.24-23.272728-23.272727 0-45.614545-37.236364-82.850909-82.850909-82.850909s-82.850909 37.236364-82.850909 82.850909c0 13.032727-10.24 23.272727-23.272727 23.272727s-23.272727-10.24-23.272727-23.272727c0-71.214545 58.181818-129.396364 129.396363-129.396364s129.396364 58.181818 129.396364 129.396364c0 12.567273-10.24 23.272727-23.272727 23.272727zM860.625455 659.083636c-13.032727 0-23.272727-10.24-23.272728-23.272727 0-45.614545-37.236364-82.850909-82.850909-82.850909s-82.850909 37.236364-82.850909 82.850909c0 13.032727-10.24 23.272727-23.272727 23.272727s-23.272727-10.24-23.272727-23.272727c0-71.214545 58.181818-129.396364 129.396363-129.396364s129.396364 58.181818 129.396364 129.396364c0 12.567273-10.24 23.272727-23.272727 23.272727z"
                        fill="#353E43"
                        p-id="8725"></path>
                      <path
                        d="M249.018182 723.781818c-43.287273 0-78.196364-34.909091-78.196364-78.196363s34.909091-78.196364 78.196364-78.196364 78.196364 34.909091 78.196363 78.196364c0 42.821818-34.909091 78.196364-78.196363 78.196363z m0-109.847273c-17.221818 0-31.650909 13.963636-31.650909 31.65091s13.963636 31.650909 31.650909 31.650909 31.650909-13.963636 31.650909-31.650909-13.963636-31.650909-31.650909-31.65091zM754.036364 723.781818c-43.287273 0-78.196364-34.909091-78.196364-78.196363s34.909091-78.196364 78.196364-78.196364 78.196364 34.909091 78.196363 78.196364c0 42.821818-34.909091 78.196364-78.196363 78.196363z m0-109.847273c-17.221818 0-31.650909 13.963636-31.650909 31.65091s13.963636 31.650909 31.650909 31.650909 31.650909-13.963636 31.650909-31.650909-13.963636-31.650909-31.650909-31.65091zM719.592727 448.698182c-7.912727 0-15.825455-4.189091-20.014545-11.636364-22.807273-38.167273-93.090909-70.749091-183.389091-58.647273-69.818182 9.309091-104.261818 41.890909-118.225455 60.509091a23.086545 23.086545 0 0 1-32.581818 4.189091 23.086545 23.086545 0 0 1-4.189091-32.581818c18.618182-24.203636 62.836364-67.025455 149.410909-78.196364 99.141818-13.032727 193.629091 20.014545 229.934546 80.989091 6.516364 11.170909 2.792727 25.134545-8.378182 32.116364-4.189091 2.327273-8.378182 3.258182-12.567273 3.258182z"
                        fill="#353E43"
                        p-id="8726"></path>
                      <path d="M721.454545 453.818182H376.087273c-13.032727 0-23.272727-10.24-23.272728-23.272727s10.24-23.272727 23.272728-23.272728H721.454545c13.032727 0 23.272727 10.24 23.272728 23.272728s-10.24 23.272727-23.272728 23.272727z" fill="#353E43" p-id="8727"></path>
                    </svg>
                    <div className="install-tips">* 初次注册并安装应用者，默认为管理员</div>
                  </div>
                </div>
                <div className="content-right">
                  <div className="verify-title-tip">
                    <div style={{ paddingLeft: '1px' }}>立即登录</div>
                    <div className="tip-info">
                      <span className="color-green">React车辆</span>
                      管理系统
                    </div>
                  </div>
                  <div className="veify-boby">
                    <Form form={form} onFinish={onFinish}>
                      <Form.Item
                        name="user_id"
                        rules={[
                          {
                            required: true,
                            message: '请输入您的工号！'
                          }
                        ]}>
                        <Input type="integer" prefix={<UserOutlined />} placeholder="工号" style={{ maxWidth: 330 }} />
                      </Form.Item>
                      <Form.Item
                        name="password"
                        style={{ marginBottom: '5px' }}
                        rules={[
                          {
                            required: true,
                            message: '请输入您的密码！'
                          }
                        ]}>
                        <Input prefix={<KeyOutlined />} type="password" placeholder="密码" style={{ maxWidth: 330 }} />
                      </Form.Item>
                      <Form.Item style={{ height: '30px' }} name="remember" valuePropName="checked" initialValue="true">
                        <Checkbox style={{ fontSize: '11px' }}>记住密码</Checkbox>
                      </Form.Item>

                      <div className="service-laws">
                        点击登录表明您已阅读并同意<span style={{ color: '#1b5cd7' }}>《服务条款》</span>
                      </div>
                      <Form.Item>
                        <Button type="primary" style={{ backgroundColor: '#1b5cd7', color: 'white', width: '320px', height: '40px', lineHeight: '24px', padding: '8px 0', marginTop: 15, fontSize: 16 }} htmlType="submit">
                          登录
                        </Button>
                      </Form.Item>
                    </Form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul className="top-solution">
        <li className="solution-item">
          <Statistic title="提高工作效率" value={30} precision={3} valueStyle={{ color: '#3f8600' }} prefix={<ArrowUpOutlined />} suffix="%" formatter={(value: any) => formatter(value)} />
        </li>
        <li className="solution-item">
          <div className="item-title">图形显示</div>
          <div className="item-label">直观清晰</div>
        </li>
        <li className="solution-item">
          <Statistic title="减少成本" value={25} precision={3} valueStyle={{ color: '#3f8600' }} prefix={<ArrowUpOutlined />} suffix="%" formatter={(value: any) => formatter(value)} />
        </li>

        <li className="solution-item">
          <div className="item-title">车辆管理</div>
          <div className="item-label">方便快捷</div>
        </li>
        <li className="solution-item">
          <Statistic title="节省人力物力" value={30} precision={3} valueStyle={{ color: '#3f8600' }} prefix={<ArrowUpOutlined />} suffix="%" formatter={(value: any) => formatter(value)} />
        </li>
      </ul>
      <div className="fx-tail">@毕业设计——React车辆管理系统</div>
    </>
  )
}
